import React, { useState, useEffect } from 'react';
import { Input, Button, Table, message } from 'antd';
import tab from '@/hoc/tab';

let params1 = '/getServiceLog';
function record(props: any) {
  const { Search } = Input;
  const { total } = props;
  const [propsArr, setPropsArr] = useState([]);
  useEffect(() => {
    setPropsArr(props.arr);
  }, [props.arr]);
  console.log(propsArr);
  const columns: any = [
    {
      title: 'ID',
      dataIndex: 'vsid',
    },
    {
      title: '游客id',
      dataIndex: 'visitor_id',
    },
    {
      title: '游客名称',
      dataIndex: 'visitor_name',
    },
    {
      title: `IP`,
      dataIndex: 'visitor_ip',
    },
    {
      title: '接待客服',
      dataIndex: 'kefu_name',
    },
    {
      title: '开始时间',
      dataIndex: 'start_date',
    },
    {
      title: '结束时间',
      dataIndex: 'end_date',
    },
  ];
  return (
    <div
      style={{
        border: '1px solid #ccc',
        width: '1600px',
        height: '80px',
      }}
    >
      <div style={{ marginTop: '30px' }}>
        <Button type="dashed">游客id</Button>
        <Search
          placeholder="请输入搜索内容"
          enterButton="搜索"
          style={{ width: 190 }}
          onSearch={(values: any) => {
            let data = JSON.parse(JSON.stringify(propsArr));
            let arr = data.filter((item: any) => {
              return item.visitor_name.includes(values);
            });
            console.log(arr);
            setPropsArr(arr);
            message.success('搜索成功');
          }}
        />
      </div>
      <Table
        columns={columns}
        dataSource={propsArr}
        pagination={{ pageSize: 5, showQuickJumper: true, total }}
      />
    </div>
  );
}

export default tab(record, params1);
